<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <title>品优购</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
</head>

<body>
    <!-- 
1. 首页
2. 列表页
3. 注册页    

1190,574
-->
    <div id="root">
        <header class="header">
            <div class="topbar-login">
                <span style="color: #FF6700;" >   品优购欢迎您!  </span>
                <a href="">请登录</a>
                <a href="">免费注册</a>
            </div>
            <div class="topbar-nav">
                <a href="">官网</a><span> | </span>
                <a href="">商城</a><span> | </span>
                <a href="">OS</a><span> | </span>
                <a href="">Admin</a><span> | </span>
                <a href="">云服务</a><span> | </span>
                <a href="">IOT</a><span> | </span>
                <a href="">开放平台</a><span>
            </div>
            <div class="topbar-cart">
                <a href="">购物车</a>
            </div>
            <div class="topbar-info">
                <a href="">登陆</a><span> | </span>
                <a href="">注册</a><span> | </span>
                <a href="">消息通知</a><span>
            </div>
        </header>


        <div class="nav-bar w">
            <div class="navbar-buttons">
                <a href="">小米手机</a>
                <a href="">Redmi红米</a>
                <a href="">电视</a>
                <a href="">笔记本</a>
                <a href="">平板</a>
                <a href="">家电</a>
                <a href="">路由器</a>
                <a href="">服务中心</a>
                <a href="">社区</a>
                <a href="">小米之家</a>
                <a href="">回收</a>
               <a href="">以旧换新</a>
            </div>
            <div class="navbar-search">
                <input type="text" placeholder="小米18">
                <button>搜索</button>
            </div>
        </div>

        <div class="header-top w">
            <div class="header-top-logo">
                <h1>
                    <a href="">
                        小米商城
                    </a>
                </h1>
            </div>
            <div class="header-top-mind">
               <input type="text" placeholder="小米18">
               <button>搜索</button>
            </div>
            <div class="hotwords">
                <a href="">小米18</a>
                <a href="">小米18</a>
                <a href="">小米18</a>
                <a href="">小米18</a>
                <a href="">小米18</a>
                <a href="">小米18</a>
            </div>
        </div>
        <div class="category w">
            <div class="category-item">
              <ul>
                <li><a href="">手机</a></li>
                <li><a href="">电视</a></li>
                <li><a href="">家电</a></li>
                <li><a href="">笔记本 平板 显示器</a></li>
                <li><a href="">出行 穿戴</a></li>
                <li><a href="">耳机 音箱</a></li>
                <li><a href="">健康 儿童</a></li>
                <li><a href="">生活 箱包</a></li>
                <li><a href="">智能 路由器</a></li>
                <li><a href="">电源 配件</a></li>
                <li><a href="">生活周边</a></li>
                <li><a href="">服务</a></li>
              </ul>
            </div>
            <div class="category-image">
                <!-- <img src="" alt="图片裂开了"> -->
                <img src="https://img.youpin.mi-img.com/ferriswheel/46dfafbe_a492_4593_9766_b5c2de0de890.jpeg"
            alt="产品图片">  
            </div>
        </div>


    </div>
</body>

</html>